<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="result">

</div>
<p>
    <input name="message" id="message"/>
    <input type="button"  onclick="sendMessage()" value="发送消息"/>
</p>
<p>
    <input name="username" id="username"/>
    <input type="button"  onclick="updateUsername()" value="取昵称"/>
</p>

<script type="text/javascript">
    //1:检测你的浏览器是否支持WebSocket
    if(window.WebSocket){
        console.log("你的浏览器支持Websocket...");
    }else{
        console.log("你的浏览器不支持Websocket...");
    }


    var socket = new WebSocket("ws://localhost:8080");

    //打开链接
    socket.onopen = function(e){
        console.log("服务器连接成功...."+socket.readyState);
        dom("result").innerHTML = "<p>提示：服务器连接成功！！！</p>";
    };

    //连接异常
    socket.onerror = function(e){
        console.log("服务器连接异常...");
    };

    //链接关闭
    socket.onclose= function(e){
        console.log("服务器关闭了..."+socket.readyState);
    };

    /*onmessage*/
    socket.onmessage = function(e){
        //onmessage主要用来接收服务器推送过来的数据
        var message = e.data;
        if(message){
            var json = JSON.parse(message);
            if(json.type=="upname"){
                dom("result").innerHTML += "<p>提示："+json.message+"</p>";
            }else if(json.type=="advice"){
                dom("result").innerHTML += "<p>"+json.message+"</p>";
            }else if(json.type=="message"){
                dom("result").innerHTML += "<p>"+json.nickname+" 说到："+json.message+"</p>";
            }else if(json.type=="leave"){
                dom("result").innerHTML += "<p>"+json.nickname+"离开了 ...</p>";
            }
        }
    };

    //往服务器趣发送数据
    function sendMessage(){
        if(socket.readyState == WebSocket.OPEN){//如果服务器已经关闭就没必要去发送数据给服务器了...
            var message = dom("message").value;
            socket.send(message);
            dom("message").value = "";
            dom("message").focus();
        }
    };

    //通知服务器更改名字
    function updateUsername(){
        if(socket.readyState == WebSocket.OPEN){
            var username = dom("username").value;
            socket.send("mk_"+username);
        }
    };


    function dom(id){
        return document.getElementById(id);
    };


</script>
<!--
    作者：xuchengfeifei@163.com
    时间：2016-12-05
    描述：webscoket讲解

    1:构造函数
    var socket = new WebSocket(url,"protocols");
    url：代表要连接的服务器地址
    protocols:连接的协议

    2:接口属性：
    a:URL:获取服务器请求的地址
    b:readState 获取连接的状态
       CONNECTING:数值0 连接尚未构建
       OPEN  :数值1 WebSocket连接已经确定，可以通信
       CLOSING:数值2 正在关闭握手
       CLOSED:数值3  关闭成功，或者连接没有打开
    c:bufferedAmount
    d:extensions:
    e:protocol:获取服务器的子协议，
    f:binaryType:


    3:接口方法：
     a:send(data):用来发送消息,data表示发送的数据，该数据可以是字符串也可以是Blob对象和ArrayBuffer对象
     b:close()关闭连接对象

    4:接口事件：
    message:当浏览器收到来自服务器的消息时，进行触发，
    open:当websocket连接已经建立，并且可以进行通信是触发的事件。即当readyState的值为OPEN(1)的时候触发.
    close:当关闭连接时触发事件，CLOSING(2)的时候触发.
    error:出现异常的时候触发

    5：开发步骤和流程：
    if(!window.WebSocket){
        console.log("你的浏览器支持Websocket...");
    }else{
        console.log("你的浏览器不支持Websocket...");
    }

    css过渡和动画 新增form元素一起讲了
-->

</body>
</html>